<template>
  <div class="content">
    <el-row>
      <el-col :span="24">
        <div>【预警统计】</div>
      </el-col>
    </el-row>
    <div id="warning" class="warning" :baseId="baseId"></div>
  </div>
</template>

<script>
import * as Axios from "../api/myAxios";
import { mapState } from "vuex";

export default {
  name: "WarningStatistics",
  computed: {
    ...mapState(["baseId"]),
  },
  methods: {
    create(idName, num) {
      let datas = {
        beidou: [
          { name: "正常", value: 0 },
          { name: "预警", value: 0 },
        ],
        qixiang: [
          { name: "正常", value: 0 },
          { name: "预警", value: 0 },
        ],
      };
      Axios.post().then((res) => {
        let listArr = res.data.parameter.list;
        let data;
        if (listArr.length == 1) {
          data = listArr[0].sensorList;
        } else {
          data = listArr[num].sensorList;
        }
        let bdArr = [],
          qxArr = [];
        for (let i in data) {
          if (data[i].moduleEnum == "00") {
            bdArr.push(data[i]);
          } else if (data[i].moduleEnum == "01") {
            qxArr.push(data[i]);
          }
        }
        for (let i in bdArr) {
          if (bdArr[i].equipmentWarnStatus == "00") {
            datas.beidou[0].value++;
          } else if (bdArr[i].equipmentWarnStatus == "01") {
            datas.beidou[1].value++;
          }
        }
        for (let i in qxArr) {
          if (qxArr[i].equipmentWarnStatus == "00") {
            datas.qixiang[0].value++;
          } else if (qxArr[i].equipmentWarnStatus == "01") {
            datas.qixiang[1].value++;
          }
        }
        let myChart = this.$echarts.init(document.getElementById(idName));
        let option = {
          title: [
            {
              subtext: "北斗",
              left: "25%",
              top: "60%",
              textAlign: "center",
              subtextStyle: {
                color: "white",
                fontSize: 14,
              },
            },
            {
              subtext: "岩土",
              left: "70%",
              top: "60%",
              textAlign: "center",
              subtextStyle: {
                color: "white",
                fontSize: 14,
              },
            },
          ],
          color: ["#2DDCFC", "#FC0303"],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          series: [
            {
              name: "外圆",
              type: "gauge",
              radius: "30%",
              center: ["28%", "40%"],
              color: "#345983",
              data: [{ name: "__other", value: "1" }],
              splitNumber: 10, //分割线个数（除原点外）
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  color: [
                    [0.09, "#345983"],
                    [0.82, "#345983"],
                    [1, "#345983"],
                  ],
                  width: 6,
                },
              },
              pointer: {
                show: false,
              },
              axisLabel: {
                // 坐标轴数字
                show: false,
              },
              axisTick: {
                // 坐标轴标记
                length: 3,
                lineStyle: {
                  color: "#13B5FC",
                },
              },
              splitLine: {
                // 分隔线
                length: 3,
                lineStyle: {
                  width: 1,
                },
              },
              title: {
                //标题，显示'馆藏量'
                show: false,
              },
            },
            {
              name: "北斗",
              type: "pie",
              radius: "22.5%",
              center: ["28%", "40%"],
              startAngle: 270,
              hoverAnimation: false,
              data: datas.beidou,
              label: {
                formatter: "{b} : {c}",
                color: "white",
                fontSize: 11,
              },
              labelLine: {
                length: 10,
                length2: 5,
                lineStyle: {
                  color: "white",
                },
              },
            },
            {
              name: "外圆",
              type: "gauge",
              radius: "30%",
              center: ["70%", "40%"],
              color: "#345983",
              data: [{ name: "__other", value: "1" }],
              splitNumber: 10, //分割线个数（除原点外）
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  color: [
                    [0.09, "#345983"],
                    [0.82, "#345983"],
                    [1, "#345983"],
                  ],
                  width: 6,
                },
              },
              pointer: {
                show: false,
              },
              axisLabel: {
                // 坐标轴数字
                show: false,
              },
              axisTick: {
                // 坐标轴标记
                length: 3,
                lineStyle: {
                  color: "#13B5FC",
                },
              },
              splitLine: {
                // 分隔线
                length: 3,
                lineStyle: {
                  width: 1,
                },
              },
              title: {
                //标题，显示'馆藏量'
                show: false,
              },
            },
            {
              name: "岩土",
              type: "pie",
              radius: "22.5%",
              center: ["70%", "40%"],
              startAngle: 270,
              hoverAnimation: false,
              data: datas.qixiang,
              label: {
                formatter: "{b} : {c}",
                color: "white",
                fontSize: 11,
              },
              labelLine: {
                length: 10,
                length2: 10,
                lineStyle: {
                  color: "white",
                },
              },
            },
          ],
        };
        myChart.clear();
        myChart.setOption(option);
      });
    },
  },
  mounted() {
    let url = window.location.href;
    let id = url.split("?")[1].split("=")[1];
    switch (id) {
      case "1":
        this.create("warning", 0);
        break;
      case "2":
        this.create("warning", 1);
        break;
      case "3":
        this.create("warning", 2);
        break;
      case "4":
        this.create("warning", 3);
    }
  },
  updated() {
    switch (this.baseId) {
      case 1:
        this.create("warning", 0);
        break;
      case 2:
        this.create("warning", 1);
        break;
      case 3:
        this.create("warning", 2);
        break;
      case 4:
        this.create("warning", 3);
    }
  },
};
</script>

<style scoped>
.warning {
  width: 300px;
  height: 250px;
  /* border: 1px solid red; */
}
.el-col > div {
  text-align: center;
  width: 70%;
  line-height: 35px;
  background: rgba(107, 151, 160, 0.5);
  color: #15f7ff;
  font-size: 22px;
  margin: 0 auto;
  margin-top: 10px;
}
</style>